import { Button, Image, Text, View } from '@tarojs/components';
import Taro, { useRouter, ShareAppMessageReturn, useShareAppMessage } from '@tarojs/taro';
import { useEffect, useState } from "react";
import data from '../../util/data';
import './index.less';
import { WorkItem } from './msg';

const loadingImg = require('../../assert/Paint_Icon_Loading.png')
const logoImg = require('../../assert/Img_logo.png')

const WorkDetail = () => {
    const [loading, setLoading] = useState(true);
    const [workItem, setWorkItem] = useState<WorkItem>({
        id: 0,
        prompt: '',
        taskId: '',
        uIndex: 0,
        status: 0,
        imageUrl: '',
    });

    const router = useRouter()

    useShareAppMessage(() => {
        return {
            title: '免费AI聊天和绘画,用它就够了',
            path: '/pages/community/index',
            imageUrl: data.shareImgUrl
        } as ShareAppMessageReturn
    })

    useEffect(() => {
        Taro.setNavigationBarColor({ backgroundColor: '#2c2c31', frontColor: '#ffffff' })

        let workStr = router.params.workItem as string;
        console.log('作品信息：', workStr)
        if (workStr && workStr !== "") {
            let work: WorkItem = JSON.parse(decodeURIComponent(workStr));
            // https://ys-aigc.oss-cn-beijing.aliyuncs.com/mj/W4iJLC.jpg?x-oss-process=image/resize,w_512/quality,q_50/crop,w_256,y_256,g_nw

            let newImageUrl = work.imageUrl.split("?")[0]
            let imageType = router.params.imageType as string;
            switch (imageType) {
                case '0':
                    break;
                case '1':
                    console.log('左上放大')
                    newImageUrl += "?x-oss-process=image/crop,w_1024,h_1024,y_0,g_nw"
                    break
                case '2':
                    console.log('右上放大')
                    newImageUrl += "?x-oss-process=image/crop,w_1024,h_1024,x_1024,g_nw"
                    console.log('URL信息====', newImageUrl)
                    break
                case '3':
                    console.log('左下放大')
                    newImageUrl += "?x-oss-process=image/crop,w_1024,h_1024,y_1024,g_nw"
                    break
                case '4':
                    console.log('右下放大')
                    newImageUrl += "?x-oss-process=image/crop,w_1024,h_1024,x_1024,y_1024,g_nw"
                    break
            }

            work.imageUrl = newImageUrl

            // 详情时使用高清原图
            console.log('URL信息：', work.imageUrl)
            setWorkItem(work);
        }
    }, [])

    const btnClickMakeSame = () => {
        data.pageShareInfo.makeSamePrompt = workItem.prompt;
        Taro.switchTab({
            url: `/pages/paint/index?prompt=${encodeURIComponent(JSON.stringify(workItem.prompt))}`,
        })
    }

    return (
        <View className='work-detail-wrapper'>
            {loading && (
                <View style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <Image src={loadingImg} mode="aspectFill" style={{ width: '20px', height: '20px', animation: 'rotate 1s linear infinite' }} />
                </View>
            )}

            <Image className='image' src={workItem.imageUrl} mode='widthFix' onLoad={() => setLoading(false)} />

            {!loading && (
                <View>
                    <View className='img-info-wrapper'>
                        <Image src={logoImg} style={{ width: '45px', height: '45px', borderRadius: '50%' }}></Image>
                        <View style={{ display: 'flex', justifyContent: 'space-between', flexDirection: 'column', marginLeft: '10px' }}>
                            <Text style={{ fontSize: '13px', color: 'white' }}>幻景画师</Text>
                            <Text style={{ fontSize: '10px', color: '#9c9da0' }}>{workItem.createTime}</Text>
                        </View>
                        {/* <Text style={{ fontSize: '14px' }}>幻境之旅</Text> */}
                    </View>
                    <Text style={{ fontSize: '14px', color: 'white', margin: '15px 0 0 10px' }}>{workItem.prompt}</Text>

                    <View className='im-toolbar'>
                        <Button className="send-button" size='mini' plain={true} onClick={btnClickMakeSame} >制作同款</Button>
                    </View>
                </View>
            )}
        </View>
    )
}

export default WorkDetail